import React from 'react';
import {Routes,Route,Link,Redirect,useParams,Navigate} from 'react-router-dom';
class Menu extends React.Component{

    render() {
        return(<div>
            <div>菜单</div>
            <ul>
                <li>
                    <a href="/shop">
                        <code>/shop</code>
                    </a>
                </li>
                <li>
                    <a href="/good">
                        <code>/good</code>
                    </a>
                </li>
                <li>
                    <a href="/product/6666">
                        <code>/product</code>
                    </a>
                </li>
            </ul>
            <hr/>

            <MyLink></MyLink>
            <hr/>
                <Routes>
                        <Route to="/about" element={<Shop/>}>
                            <Route path="/shop" element={<Shop/>}></Route>
                        </Route>

                        // 用于定义嵌套路由
                        <Route to="/about">
                            <Route path="/product/:id" element={<Product/>}></Route>
                            <Route path="/good" element={<Good/>}></Route>
                        </Route>
                        <Route path='/user' element={ (
                            <div>
                                <h3>用户组件!</h3>
                                <p>
                                    姓名：你好！
                                </p>
                            </div>
                        )} />
                        {/* 使用Navigate进行重定向 */}
                        <Route path="/" element={<Navigate to="/shop" />} />
                </Routes>
        </div>)
    }
}

const Shop=()=>(
    <div>
        <p>店铺页面</p>
    </div>
);

const User=()=>(
    <div>
        <p>用户页面</p>
    </div>
);

const Good=()=>{
    const { username } = useParams();
    console.log(username)
    return (<div>
        <p>Good页面，入参数：{username}</p>
    </div>);
};


const Product=()=>{
    const { id } = useParams();
    console.log("Product ....props....",id);
    return (
        <div>
            <p>商品详情页</p>
            <p>商品信息：{id}</p>
        </div>
    );
};


const MyLink = ({path,component}) => {
    console.log(path,component)
    {/*若将路径写成对象形式,且和下面相同,会自动将pathname、search、hash自动拼接在url路径上,state为传入组件的数据*/}
    let obj={pathname:"/good",search:'?username=admin',hash:"#abc",state:{msg:'hello'}};

    return (
        <div>
            <ul>
                <li>
                    <Link to='/user'>
                        <code>用户</code>
                    </Link>
                </li>
                <li>
                    <Link to='/shop'>店铺首页</Link>
                </li>
                <li>
                    <Link to='/product/a10b'>产品管理</Link>
                </li>
                <li>
                    {/*可在对应的组件中输出props查看传入的对象的信息,添加replace将跳转前的上一个页面替换成当前页面,只将当前页面入栈*/}
                    <Link to={obj} replace>商品中心</Link>
                </li>
                <li>
                    <Link to='/about'>关于我们</Link>
                </li>
                <li>
                    <Link to='/about/shop'>关于店铺</Link>
                </li>
            </ul>
        </div>
    );
}

export default Menu;